<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <a-row :gutter="[0,16]">
      <!-- TODO 搜索 -->
      <a-col :span="24">
        <a-form layout="inline" :form="searchForm">

          <a-form-item label="发布者">
            <a-input
                placeholder="发布者"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="发布时间">
            <a-input
                placeholder="发布者"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                show-search
                placeholder="请选择通知状态"
                style="width: 180px"
            >
              <a-select-option value="1">
                正常
              </a-select-option>

              <a-select-option value="0">
                停用
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-button type="primary">
              <a-icon type="search"/>
              搜索
            </a-button>
          </a-form-item>

        </a-form>
      </a-col>

    </a-row>
    <a-row :gutter="[0,16]">
      <a-col :span="24">
        <a-button type="primary" @click="onAddButtonClick">添加</a-button>
      </a-col>
    </a-row>

    <a-row :gutter="[0,16]">
      <!-- 分页列表区 -->
      <a-col :span="24">
        <a-table
            :rowKey="rowKey"
            :columns="columns"
            :data-source="data"
            :defaultExpandAllRows="true"
            :pagination="pagination"
            bordered
        >
          <a :href="url" slot="image" slot-scope="url" target="_blank">点击查看</a>
          <!-- 在职状态 -->
          <span slot="status" slot-scope="status, item">
            <a-popconfirm
                placement="topLeft"
                ok-text="确认"
                cancel-text="取消"
                @confirm="onChangeStatus(item, status)"
            >
              <template slot="title"> 确定要修改吗? </template>
              <a-switch
                  checked-children="启用"
                  un-checked-children="停用"
                  :checked="status === 1"
                  size="large"
              />
            </a-popconfirm>
          </span>
        </a-table>

      </a-col>

    </a-row>


    <a-modal
        :title="modal.ModalText"
        :visible="modal.visible"
        @ok="onModalOkClick"
        @cancel="handleCancel"
    >
      <div>
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label="通知">
            <a-textarea
                v-model="addInfo.msg"
                v-decorator="[
                  'name',
                  {
                    rules: [
                        /*TODO 不超过20个字*/
                      { required: true, message: '请填写发布的信息'},
                    ],
                  },
                ]"
                placeholder="请填写发布的信息"
                :autoSize="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea
                v-model="addInfo.remark"
                v-decorator="['remark', {}]"
                placeholder="备注"
                :autoSize="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {stopBanner} from "@/services/banner";
  import {getNotices, postNotices} from "@/services/notice";
  export default {
    name: 'Notice',
    data() {
      return {
        columns: [
          {
            title: '编号',
            dataIndex: 'noticeId',
          },
          {
            title: '展示顺序',
            dataIndex: 'orderNum'
          },
          {
            title: "通知内容",
            dataIndex: 'message'
          },
          {
            title: '发布者',
            dataIndex: 'publisher',
          },{
            title: '创建时间',
            dataIndex: 'createTime'
          },
          {
            title: '发布时间',
            dataIndex: 'publishTime'
          }, {
            title: '过期时间',
            dataIndex: 'expiration'
          },
          {
            title: '通知状态',
            dataIndex: 'status',
            scopedSlots: {
              customRender: 'status'
            }
          },
          {
            title: '备注',
            dataIndex: 'remark',
          }
          , {
            title: '操作',
            dataIndex: 'operator',
            scopedSlots: {customRender: 'operator'}
          },

        ],
        data: [],
        rowKey: '',
        searchForm: {},
        pagination: {
          current: 1,
          pageSize: 15,
          pageSizeOptions: ["15", "20", "30"],
          showTotal: (total) => {
            return " 共 " + total + " 条";
          },
          total: 0,
        },
        modal:{
          visible: false,
          ModalText: "发布通知"
        },
        addInfo:{
          msg: '',
          remark: ''
        }
      }
    },
    computed: {
      ...mapState('setting', ['pageMinHeight']),

    },methods:{
      onChangeStatus(item, status) {
        if (item.status == 0) {
          this.$message.error("当前状态不允许被修改!")
          return
        }
        console.log("确认修改", status);
        let afterCode = this.changeStatusValue(status);
        console.log(afterCode)
        stopBanner(item.bannerId).then((res)=>{
          if (res.data.code == 1000){
            item.status = afterCode
            this.$message.success("修改成功")
          }else{
            this.$message.success("修改失败")
          }

        })
      },
      changeStatusValue(status) {
        if (status == 1) {
          return 0;
        } else if (status == 0) {
          return 1;
        }
      },
      // 获取通知
      getNotices(){
        getNotices().then((res)=>{
          console.log(res)
          if (res.data.code == 1000){
            this.data = res.data.data.list
          }
        })
      },
      // 模态框被取消
      handleCancel(){
        this.modal.visible = false
      },
      // 当添加按钮被单击
      onAddButtonClick(){
        this.modal.visible = true
      },
      // 模态框中确认按钮被单击
      onModalOkClick(){
        postNotices(this.addInfo.msg,this.addInfo.remark).then((res)=>{
          console.log(res.data)
          if (res.data.code == 1000){
            this.$message.success("发布成功!")
            this.handleCancel()
            this.getNotices()
          }else{
            this.$message.error("发布失败!")
          }
        })
      }
    },
    mounted() {
      // 当页面挂载的时候
      this.getNotices()
    }
  }
</script>

<style scoped lang="less">

</style>